import React,{Component} from 'react';
import $ from 'jquery';
import '../styles/xingzuo.css';
import { HashRouter as Router, Route,Link} from 'react-router-dom';
class GetstartInfo extends Component{
	constructor(props) {
      super(props);
      this.state = {
          goodsinfo:[],
          giday:[],
          gitw:[],
          giwk:[],
          gimh:[],
          giyr:[]
          
      }
  }
	componentWillMount(){
	    let that = this;
	    $.get("http://route.showapi.com/872-1",{
	      	showapi_appid: 41467,
			showapi_sign: 'fc090ece3fed4ab5988e0483ecd0d5cf',
	    	star:"shuangzi",
	    	needTomorrow:1,
	    	needWeek:1,
	    	needMonth:1,
	    	needYear:1
	    },
	        function(res){
	        	if(res&&res.showapi_res_code===0){
	        		var listInfo = res.showapi_res_body;
	        		
	        		var daystar=res.showapi_res_body.day;
					var tomorrowstar=res.showapi_res_body.tomorrow;
					var weekstar=res.showapi_res_body.week;
					var monthstar=res.showapi_res_body.month;
					var yearstar=res.showapi_res_body.year;
		        	console.log(listInfo);
			      	that.setState({
		            	goodsinfo:listInfo,
		            	giday:daystar,
		            	gitw:tomorrowstar,
			          	giwk:weekstar,
			          	gimh:monthstar,
			          	giyr:yearstar
		            	
		            	
	            });
	        	}
	        	
	        },"json")
    }

	render(){
//		var itemarr = this.state.goodsinfo.map((item,i)=>{
//		    return (
//		    	<div key={i} className="contain">
//			    	<div className="person">
//							<p>{item.love_txt}</p>
//
//						</div>
//					</div>
//		    )
//		})
		
		return(
			<div className="xzcon">		
				<div className="infoList">
					<div className="selectStar">选择星座:双子座</div>
					<div className="result">
						<ul>
							<li className="partList"><span className="bt">整体运势:</span><span>{this.state.giday.summary_star}</span></li>
							<li className="partList"><span className="bt">爱情运势:</span><span>{this.state.giday.love_star}</span></li>
							<li className="partList"><span className="bt">事业学业:</span><span>{this.state.giday.work_star}</span></li>
							<li className="partList"><span className="bt">财富运势:</span><span>{this.state.giday.money_star}</span></li>
							<li className="partList"><span className="bt">贵人星座:</span><span>{this.state.giday.grxz}</span></li>
							<li className="partList"><span className="bt">幸运数字:</span><span>{this.state.giday.lucky_num}</span></li>
							<li className="partList"><span className="bt">吉利方位:</span><span>{this.state.giday.lucky_direction}</span></li>
							<li className="partList"><span className="bt">幸运颜色:</span><span>{this.state.giday.lucky_color}</span></li>
						</ul>
						<div className="startext">
							<div className="startitle aqys"><span><i className="iconfont icon-jiemi-aiqing"></i></span>爱情运势</div>
							<p className="startfxcon">{this.state.giday.love_txt}</p>
						</div>
						<div className="startext">
							<div className="startitle gzys"><span><i className="iconfont icon-gongzuo"></i></span>工作运势</div>
							<p className="startfxcon">{this.state.giday.work_txt}</p>
						</div>
						<div className="startext">
							<div className="startitle cfys"><span><i className="iconfont icon-icon-test"></i></span>财富运势</div>
							<p className="startfxcon">{this.state.giday.money_txt}</p>
						</div>
						<div className="startext">
							<div className="startitle ysjp"><span><i className="iconfont icon-yunhangqushi-"></i></span>整体运势</div>
							<p className="startfxcon">{this.state.giday.general_txt}</p>
						</div>
						<div className="startext">
							<div className="startitle jrtx"><span><i className="iconfont icon-gentie"></i></span>今日提醒</div>
							<p className="startfxcon">{this.state.giday.day_notice}</p>
						</div>
					</div>
				</div>
			</div>
		)
	}
}
export default GetstartInfo;





